<template>
  <div class="header-box">
    <div class="">
      <!-- <t-button theme="primary" size="small" @click="save">保存</t-button>
      <t-button
        theme="danger"
        size="small"
        variant="outline"
        @click="clearCanvas"
        >清空画布</t-button
      > -->
      <t-button theme="primary" size="small" @click="genImage"
        >生成图片</t-button
      >
    </div>
    <div v-if="showImg" class="mask">
      <div>
        <img @click="showImg=false" class="clsoe" src="../../../../assets/images/close.png" alt="">
        <div class="words">长按识别保存到本地</div>
      </div>
      <div class="imgbox">
        <img :src="imgs" alt="" />
      </div>
      
    </div>
  </div>
</template>

<script setup lang="ts">
import { useEditor } from "@/views/Editor/app";
import { Platform } from "leafer-ui";
import messageHandlerInstance from "@/handler/IframeMessageHandler";
import { TO_USER_CMD } from "@/constant/IframeCmd";

Platform.image.suffix = "";
const { editor, keybinding } = useEditor();

const changeLineGuides = () => {
  keybinding.trigger("shift+r");
};
const clearCanvas = () => {
  editor.clearFrame();
};

const showImg = ref(false);

const imgs = ref("");

const blobToBase64 = (blob: any) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();

    // 监听读取成功的事件
    reader.onloadend = function () {
      resolve(reader.result); // 读取结果是 Base64 字符串
    };

    // 监听读取失败的事件
    reader.onerror = function (error) {
      reject(error); // 出现错误时，返回错误信息
    };

    // 读取 Blob 并转换为 Base64
    reader.readAsDataURL(blob);
  });
};
const genImage = async () => {
  console.log("多页面JSON：", editor.getPages());
  const pages = await editor.getPages();
  let json = editor.contentFrame.toJSON();
  console.log("当前页JSON：", json);
  // 使用messageHandlerInstance发送消息给父页面
  // messageHandlerInstance.postMsg(TO_USER_CMD.genImage,{
  //     currentPage: json,
  //     pages: pages
  // })
  // 使用这个方法就可以直接导出图片的blob
  const cover = await editor.contentFrame.export("png", { blob: true });
  const url = URL.createObjectURL(cover.data);
  console.log(url, cover, 44444444);

  blobToBase64(cover.data)
    .then((base64String) => {
      console.log(base64String, 8888888); // 输出 Base64 编码的字符串
      imgs.value = base64String;
      showImg.value = true;
    })
    .catch((error) => {
      console.error("Error converting blob to base64:", error);
    });

  // fetch(url)
  // .then(response => response.blob())
  // .then(blob => {
  //   // 创建一个新的下载链接
  //   const link = document.createElement('a');
  //   // 给链接添加文件名，可以自定义
  //   link.download = 'downloaded_file'; // 设置下载文件的名字
  //   // 创建一个本地 URL 用于 Blob 对象
  //   const url = URL.createObjectURL(blob);
  //   // 设置链接的 href 为 Blob URL
  //   link.href = url;
  //   // 触发点击事件来下载文件
  //   link.click();
  //   // 释放创建的 URL
  //   URL.revokeObjectURL(url);
  // })
  // .catch(error => console.error('下载文件时出错:', error));
};
const save = async () => {
  console.log("多页面JSON：", editor.getPages());
  const pages = await editor.getPages();
  let json = editor.contentFrame.toJSON();
  console.log("当前页JSON：", json);
  messageHandlerInstance.postMsg(TO_USER_CMD.save, {
    currentPage: json,
    pages: pages,
  });
};
</script>
<style lang="less">
.mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
  .clsoe{
    position: absolute;
    top: 25px;
    right: 8px;
    width: 30px;
  }
  .imgbox {
    height: 90vh;
    width: 90%;
    margin:0vh auto 0;
    border-radius: 8px;
    overflow-y: auto;
    img {
      display: block;
      width: 100%;
      height: auto;
    }
  }
  .words {
    text-align: center;
    padding: 10px 0;
    color: #fff;
  }
}
.down-list {
  padding: 0 !important;
  margin: 0 !important;
  min-width: 200px;

  ul {
    padding: 0;
    margin: 5px 0;
    list-style: none;
  }

  li {
    padding: 0 20px;
    cursor: pointer;
    color: #1b2337;
    display: block;
    font-size: 14px;
    line-height: 40px;
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  li:hover {
    cursor: pointer;
    background-color: #f1f2f4;
  }
}
</style>
<style scoped lang="less">
@import "../../styles/layouts";

.header-bar {
  border-bottom: 1px solid var(--color-border);
  border-radius: 2px 2px 0 0;
}

.file-basic {
  padding: 10px;
  width: 200px;
  background-color: var(--color-bg-popup);
  border-radius: 4px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
}

.border-bottom {
  border-bottom: 1px solid var(--color-border);
  border-radius: 2px 2px 0 0;
}
</style>
